<template>
  <div class="serve-page">
    <top-header :title="'我的客服'" />
    <div class="serve-card">
      <div class="display serve-card-content"
           v-for="(item, index) of service_list"
           :key="index">
        <div class="serve-card-content__text">
          <div class="font-size-16 font-color-343434">{{ item.name }}</div>
          <div class="font-size-18 font-color-343434">{{ item.tel }}</div>
        </div>
        <img class="serve-card-content__img"
             src="@/assets/image/icon_phone@3x.png"
             @click="handleCallPhone(item.tel)" />
      </div>
    </div>
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader';
import cookie from '@/utils/cookie';
export default {
  name: 'index',
  components: {
    TopHeader,
  },
  data () {
    return {
      service_list: [], //客服列表
    };
  },
  mounted () {
    this.getServiceList();
  },
  methods: {
    getServiceList () { //获取客服列表
      _api
        .api_userPortal_sysService_getListByCon({
          //获取客服列表
          town_id: cookie.get('town_id') || 14,
        })
        .then((res) => {
          this.service_list = res.data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleCallPhone (tel) { //调取打电话
      window.location.href = `tel:${tel}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.serve-page {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	min-height: 100vh;
}
.serve-card {
	border-top: 0.024155rem solid #e8e8e8;
	.serve-card-content {
		border-bottom: #e8e8e8 0.024155rem solid;
		margin: 0 0.362319rem;

		.serve-card-content__text {
			color: #343434;
			padding: 0.531401rem;
			font-size: 0.434783rem;

			div:first-child {
				margin-bottom: 0.072464rem;
			}
		}

		.serve-card-content__img {
			padding: 0 0.57971rem;
			border-left: #dde9ff 0.024155rem solid;
			width: 0.652174rem;
			height: 0.652174rem;
		}
	}
}
</style>
